
<html>
  <head>
    <title>Dominoes!</title>
    <script type="text/javascript"
        src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js">
    </script>
    <script type="text/javascript">
           dojo.require("dojox.gfx");
            dojo.require("dojox.gfx.move");

            dojo.addOnLoad(function() {
                var node = dojo.byId("surface");
                var surface = dojox.gfx.createSurface(node, 600, 300);

                /* Using some sane ratios for layout, construct a domino */
                function drawDomino(surface,x,y,num1,num2,_width) {

                    var surface = surface.createGroup();

                    var _width = _width || 200;

                    _height = 2*_width, _r = _width/20;

                    //draw an empty domino...
                    var rect1 = surface.createRect({
                        x : x,
                        y : y,
                        width : _width,
                        height : _height,
                        r : _r
                    })
                    .setStroke("black")
                    .setFill("black")
                    ;
                    var rect2 = surface.createRect({
                        x : x+ _r/2,
                        y : y+ _r/2,
                        width : _width -_r,
                        height :_height -_r,
                        r : _r
                    })
                    .setStroke({width: _r/4, color: "white"})
                    ;

                    var line = surface.createLine({
                        x1 : x + _r/2,
                        y1 : y+_height/2,
                        x2 : x+ _width - _r/2,
                        y2 : y+_height/2
                    })
                    .setStroke({width: _r/4, color: "white"})
                    ;

                    //now, fill in the dots

                    //numbers 1,3,5 have dots in the center
                    if (num1 == 1 || num1 == 3 || num1 == 5) {
                        surface.createCircle({
                            cx : x+_width/2,
                            cy : y+_height/4,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                    }
                    if (num2 == 1 || num2 == 3 || num2 == 5) {
                        surface.createCircle({
                            cx : x+_width/2,
                            cy : y+_height/4*3,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                    }

                    //numbers >= 2 have two of the corners filled in
                    if (num1 >= 2) {
                        surface.createCircle({
                            cx : x+_width/6*5,
                            cy : y+_height/12,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                        surface.createCircle({
                            cx : x+_width/6,
                            cy : y+_height/12*5,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;

                    }
                    if (num2 >= 2) {
                        surface.createCircle({
                            cx : x+_width/6*5,
                            cy : y+_height/12*7,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                        surface.createCircle({
                            cx : x+_width/6,
                            cy : y+_height/12*11,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                    }

                    //numbers >=4 have the other two corners filled in
                    if (num1 >= 4) {
                        surface.createCircle({
                            cx : x+_width/6,
                            cy : y+_height/12,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                        surface.createCircle({
                            cx : x+_width/6*5,
                            cy : y+_height/12*5,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                    }
                    if (num2 >= 4) {
                        surface.createCircle({
                            cx : x+_width/6,
                            cy : y+_height/12*7,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                        surface.createCircle({
                            cx : x+_width/6*5,
                            cy : y+_height/12*11,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                    }

                    //number 6 has the sides filled in
                    if (num1 == 6) {
                        surface.createCircle({
                            cx : x+_width/6,
                            cy : y+_height/4,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                        surface.createCircle({
                            cx : x+_width/6*5,
                            cy : y+_height/4,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                    }
                    if (num2 == 6) {
                        surface.createCircle({
                            cx : x+_width/6,
                            cy : y+_height/4*3,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                        surface.createCircle({
                            cx : x+_width/6*5,
                            cy : y+_height/4*3,
                            r : _width/10
                        })
                        .setStroke("white")
                        .setFill("white")
                        ;
                    }

                    return surface;
                }

                var width=50,
                    padding=50;

                for (var i=0; i <= 6; i++) {
                    var d = drawDomino(
                        surface,
                        i*75+padding,
                        2*padding,
                        i,
                        Math.floor(Math.random()*7),
                        width
                    );

                    ////////////////////////////////////////////
                    //This is all it takes to make the group
                    //drag-and-droppable!
                    ////////////////////////////////////////////
                    new dojox.gfx.Moveable(d);
                }

                ////////////////////////////////////////////
                //Ensure that the last domino moved is always on top
                //by subscribing to move notifications and
                //adjusting the z-index
                ////////////////////////////////////////////
                dojo.subscribe("/gfx/move/start", function(m) {
                    m.shape.moveToFront();
                });

            });

    </script>
  </head>
  <body>
    <div id="surface"
     style="position:absolute;width:600;height:300;border:solid1px;">
    </div>
  </body>
</html>
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */